<template>
  <a-skeleton :loading="loading">
      <div class="title">
          {{ "Best " + type + " Games" }}
      </div>
      <div class="description">
          {{ description }}
      </div>
      <TagList :list="list" :type="$route.fullPath.includes('/games') ? 'games' : 'apps'" />
      <div class="hotList">
          <HotItem class="hotItem" v-for="(item) in cateList" @click="handleClick(item)" style="margin-bottom: 16px;"
              :item="item" />
      </div>
      <div class="btn" @click="showMore" v-if="cateList?.length < 24">
          load more
      </div>
  </a-skeleton>
</template>

<script setup>
import categoryList from '../../category.json'
const route = useRoute()
const cateList = ref([])
const moreList = ref([])
const showMore = () => {
  cateList.value = moreList.value
}
function upperFirst(str) {
  str = str.toLowerCase()
  return str.replace(/\b\w|\s\w/g, fw => {
      return fw.toUpperCase()
  })
}
const type = ref(upperFirst(route.params.slug))
const loading = ref(false)
const description = ref('')
const seoTitle = ref('')
const seoDescription = ref('')
const list = ref([])
for (const item of categoryList) {
  if (type.value === item.name) {
      description.value = item.description
      seoTitle.value = item.seoTitle
      seoDescription.value = item.seoDescription
  }
}
const slug = ref(route.fullPath.includes('/games') ? `game-${route.params.slug}` : route.params.slug)
const loadData = async () => {
  loading.value = true
  const { data, error } = await useApi('/api/genre/getGenre', {
      method: "GET",
      params: {
          language: 'en'
      }
  })

  list.value = data.value?.genre_list.filter(item => {
      return !item.genre_slug.includes('game-')
  })
  const { data: cate } = await useApi('/api/genre/getAppBySlug', {
      method: 'GET',
      params: {
          genre_slug: slug.value,
          language: route.params.hasOwnProperty('language') ?  route.params.language : 'en'
      }
  })
  moreList.value = cate.value
  if(moreList.value?.length > 24){
      cateList.value = moreList.value.slice(0, 24)
  }else{
      cateList.value = moreList.value
  }
  loading.value = false
}
const handleClick = (item) => {
  const url = (route.params.hasOwnProperty('language') ? "/" + route.params.language : '') + `/android/${item.app_slug}`
  navigateTo(url)
}
loadData()
useHead({
  title: computed(() => { return seoTitle.value }),
  meta: [
      {
          name: 'robots',
          content: 'noindex,nofollow'
      },
      {
          name: 'description',
          content: computed(() => `${seoDescription.value}`)
      }
  ],
})
</script>
<style scoped lang="less">
.title {
  color: var(--Text-Title, #3E4351);
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  margin-top: 12px;
  /* 116.667% */
}

.description {
  overflow: hidden;
  color: var(--Text-Text, #505662);
  text-overflow: ellipsis;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 171.429% */
  margin-top: 12px;
}

.hotList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
}

.hotItem {
  width: calc((100% - 7*8px)/8);
  flex: none;

  @media (max-width: 1600px) {
      width: calc((100% - 5*8px)/6);
      flex: none;
  }

  @media (max-width: 767px) {
      width: calc((100% - 2*8px)/3);
      flex: none;
  }
}

.btn {
  display: flex;
  max-width: var(--sm, 430px);
  padding: 10px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 8px;
  background: var(--Brand, #775CE1);
  margin: 0 auto;
  color: #FFF;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 142.857% */
  text-transform: capitalize;
  cursor: pointer;
  margin-bottom: 16px;
}
</style>